/**
 *  自定义 hooks 封装技巧：
 * 1. 把相同的部分放到 hook 函数中
 * 2. 不同的部分设计为参数传入
 * 注意：自定义 hook 命名以 use 开头
 */
import { ref, onMounted } from 'vue'
/**
 *  实现列表数据下拉刷新和上拉分页
 * apiFn 列表请求的后台 api 函数
 * type 接口一些参数
 */
export const useList = (apiFn, type) => {

	// 1.  待提货列表数据
	const list = ref([])
	//  请求参数
	const parmas = {
		page: 1,
		pageSize: 10
	}
	// 获取列表数据方法
	const getList = async () => {
		const { data } = await apiFn(type, parmas.page)
		console.log('待提货列表：', data)
		// 追加数据
		list.value.push(...(data.items || []))
		//  每次请求完，判断是否有更多数据
		//  说明：使用列表长度和后台数据总数判断
		if (list.value.length === parseInt(data.counts)) {
			//  没有数据了
			hasMore.value = false
		}
	}

	// 是否还有更多数据？ true 有 ｜ false 没有
	const hasMore = ref(true)
	// 加载更多数据的函数
	const loadMore = () => {
		// 1. 没有数据
		if (!hasMore.value) return
		// 2. 还有数据
		parmas.page++
		getList()

	}
	// 下拉刷新
	const isTriggered = ref(false)
	const resetList = async () => {
		//  开启下拉刷新加载动画
		isTriggered.value = true
		//  重置列表
		parmas.page = 1
		list.value = []
		hasMore.value = true
		// 重新发请求
		await getList()
		// 请求成功后关闭加载动画
		isTriggered.value = false
	}
	// 2.  获取数据
	onMounted(() => {
		getList()
	})
	//  返回外边要是用的响应变量和一些方法
	return { list, hasMore, loadMore, isTriggered, resetList }
}